<template>
  <div>
    <el-dialog :visible.sync="dialogShow" width="1080px" :show-close="false">
      <div class="printOrder_box">
        <section class="print_box prints" id="prints">
          <div class="printOrder_main" v-for="(item, index) in orderList" :key="index">
            <div class="printOrder_header FCC">伯图旗舰店发货单</div>
            <div class="personMessage">
              <div class="print_item F">
                <div class="print_item_box overflowEllipsis">收货人：{{item.receiver}}</div>
                <div class="print_item_box mgl_30 overflowEllipsis">电话：{{item.receiverMobile}}</div>
              </div>
              <div class="print_item overflowEllipsis">地址：{{item.receiverAreaName}}</div>
              <div class="print_item F">
                <div class="print_item_box overflowEllipsis">订单号：{{item.orderId}}</div>
                <div class="print_item_box mgl_30 overflowEllipsis">下单时间：{{item.paymentTime}}</div>
              </div>
            </div>
            <div class="tableMessage">
              <ul class="tableMessage_UL">
                <li class="tableMessage_item tableMessage_item_title">
                  <div style="width:50px">序号</div>
                  <div style="width:500px;">商品名称</div>
                  <div style="width:100px">单价(元)</div>
                  <div style="width:100px">数量</div>
                  <div style="width:100px">小计(元)</div>
                </li>
                <li
                  class="tableMessage_item tableMessage_item_bd"
                  v-for="(good, goodIndex) in item.orderItems"
                  :key="goodIndex"
                >
                  <div style="width:50px">{{goodIndex + 1}}</div>
                  <div style="width:500px;">{{good.title | numberFil}}</div>
                  <div style="width:100px">{{good.price | numberFil}}</div>
                  <div style="width:100px">{{good.num | numberFil}}</div>
                  <div style="width:100px">{{good.totalFee | numberFil}}</div>
                </li>
              </ul>
            </div>
            <div class="print_total">
              <div class="print_total_box F">
                <div class="print_total_box1_item1">合计</div>
                <div class="print_total_box1_item2 overflowEllipsis">{{item.orderItems.length | numberFil}}</div>
                <div class="print_total_box1_item3 overflowEllipsis">￥{{item.payment | numberFil}}</div>
              </div>
              <div class="print_total_box F">
                <div
                  class="print_total_box2_item3 overflowEllipsis print_total_box1_item1"
                >总计：￥{{item.total | numberFil}}</div>
                <div
                  class="print_total_box2_item1 overflowEllipsis print_total_box1_item1"
                >运费：￥{{item.postFee | numberFil}}</div>
                <div
                  class="print_total_box2_item1 overflowEllipsis print_total_box1_item1"
                >优惠：￥{{item.discounts | numberFil}}</div>
                <div
                  class="print_total_box2_item2 overflowEllipsis print_total_box1_item1"
                >订单金额：￥{{item.payment | numberFil}}</div>
              </div>
            </div>
          </div>
        </section>
        <div class="print_but F">
          <el-button class="baseBorderBut w_80 mgr_10" @click="closeDialog()">取消</el-button>
          <el-button
            class="baseBut w_80 bg_base mgl_10 mgr_20"
            type="primary"
            @click="printClick()"
          >打印</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["showTrue", "orderData"],
  data() {
    return {
      orderList: [],
      goodNum: 0,
      orderInfo: null,
      dialogShow: false
    };
  },
  watch: {
    showTrue(val) {
      let self = this;
      self.dialogShow = val;
      if (self.dialogShow) {
        self.$nextTick(() => {
          self.dataBackfillFun();
        });
      }
    }
  },
  methods: {
    /* 数据回填  start */
    dataBackfillFun() {
      console.log("  this.orderData", this.orderData);

      if (this.orderData && this.orderData.length) {
        this.orderList = this.orderData ? this.orderData : [];
      }
      // this.TotalFun();
    },
    /* 数据回填  end */
    /* 总价计算  start */
    TotalFun() {
      let Prices = this.orderList.map(e => {
        return e.price;
      });
      this.total = this.baseTotalFee(Prices);
    },
    /* 总价计算  end */
    closeDialog() {
      this.$emit("close");
    },
    /* 打印  start */
    printClick() {
      let self = this;
      let subOutputRankPrint = document.getElementById("prints");
      let newContent = subOutputRankPrint.innerHTML;
      let oldContent = document.body.innerHTML;
      document.body.innerHTML = newContent;
      window.print();
      window.location.reload();
      document.body.innerHTML = oldContent;
    }
    /* 打印  end */
  }
};
</script>

<style scoped>
.print_but {
  height: 52px;
  margin-top: 78px;
  width: 100%;
  justify-content: flex-end;
}
.printOrder_box {
  width: 1080px;
  background: #ffffff;
  position: absolute;
  top: 0;
  left: 0;
}

.print_box {
  width: 100%;
  max-width: 1080px;
  page-break-after: always;
}
.printOrder_header {
  font-size: 24px;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  height: 153px;
  width: 1080px;
  line-height: 153px;
  height: 153px;
}
.printOrder_main {
  width: 1080px;
  margin-bottom: 50px;
}
.personMessage {
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  font-size: 14px;
  width: 1080px;
}
.print_item {
  width: 960px;
  margin-left: 60px;
  height: 20px;
  margin-bottom: 20px;
  display: flex;
}
.print_item_box {
  max-width: 250px;
  min-width: 100px;
}
.tableMessage {
  width: 960px;
  margin-left: 60px;
}
.tableMessage_UL {
  width: 100%;
}
.tableMessage_item {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(235, 238, 243, 1);
  border-top: 0;
}

.tableMessage_item div {
  width: 25%;
}
.tableMessage_item_title {
  background: rgba(245, 246, 250, 1);
}
.tableMessage_item_title div {
  padding: 18px 7px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  height: 24px;
  line-height: 24px;
}
.tableMessage_item_bd div {
  line-height: 22px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  padding: 18px 7px;
}
.print_total {
  width: 960px;
  margin-left: 60px;
}
.print_total_box {
  line-height: 60px;
  height: 60px;
  border: 1px solid rgba(235, 238, 243, 1);
  border-top: 0;
  font-size: 14px;
  font-weight: 400;
  color: rgba(45, 55, 62, 1);
}
.print_total_box1_item1 {
  margin-left: 20px;
}
.print_total_box1_item2 {
  margin-left: 40px;
  max-width: 200px;
}
.print_total_box1_item3 {
  margin-left: 40px;
  max-width: 200px;
  height: 60px;
  line-height: 60px;
}
.print_total_box2_item1 {
  min-width: 100px;
  height: 60px;
  line-height: 60px;
  max-width: 140px;
}
.print_total_box2_item2 {
  min-width: 160px;
  height: 60px;
  line-height: 60px;
  max-width: 200px;
}
.print_total_box2_item3 {
  min-width: 120px;
  height: 60px;
  line-height: 60px;
  max-width: 150px;
}
</style>